<script setup>
import {Close, Download, Files, Refresh, Upload} from '@element-plus/icons-vue'
import router from "@/router/index.js";
import {usePcKeyStore} from "@/stores/pckey.js";
import {readJsonFile, shutdown, writeJsonFile} from "@/api/axios.js";

const pcKeyStore = usePcKeyStore();

const refresh = () => {
  //刷新
  router.go(0);
}

const download = (jsonString) => {
  // 创建 Blob 对象
  const blob = new Blob([JSON.stringify(jsonString)], {type: 'application/json'});

  // 创建下载链接
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'pc_key_setting_data.json';

  // 触发点击事件
  document.body.appendChild(link);
  link.click();

  // 清理
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

const readFile = () => {
  //读取文件
  readJsonFile()
}

const writeFile = (json) => {
  //上传文件
  writeJsonFile(json)
}

const shutdownJar = () => {
  shutdown()
}

</script>

<template>
  <div class="div01">
    <el-button :icon="Refresh" class="button01" plain type="info" @click="refresh">
      刷新
    </el-button>
    <el-button :icon="Files" class="button01" plain type="primary" @click="readFile">
      读取键位文件
    </el-button>
    <el-button :icon="Download" class="button01" plain type="primary" @click="download(pcKeyStore.pckey)">
      下载键位文件
    </el-button>
    <el-button :icon="Upload" class="button01" plain type="success" @click="writeFile(pcKeyStore.pckey)">
      保存到键位文件
    </el-button>
    <el-button :icon="Close" class="button01" plain type="danger" @click="shutdownJar">
      关闭程序
    </el-button>
  </div>
</template>

<style scoped>
.div01 {
  margin: 0 auto;
}

.button01 {
  width: 10rem;
  font-size: 1rem;
}

</style>